import { Modal, Form, Input } from "antd";
import React, { useRef } from "react";
const AddOption = ({ open, onOk, onCancel }) => {
  const [content, setContent] = React.useState("");
  const submitButton = useRef(null);
  return (
    <Modal
      centered={true}
      title="添加选项"
      width={300}
      open={open}
      okText="添加"
      cancelText="取消"
      onOk={() => submitButton.current.click()}
      onCancel={onCancel}
      destroyOnClose={true}
    >
      <Form
        onFinish={(values) => {
          onOk(values.content);
        }}
      >
        <Form.Item
          label="内容"
          name="content"
          rules={[{ required: true, message: "请输入内容！" }]}
        >
          <Input value={content} onChange={(e) => setContent(e.target.value)} />
        </Form.Item>
        <button
          ref={submitButton}
          type="submit"
          style={{ display: "none" }}
        ></button>
      </Form>
    </Modal>
  );
};
export default AddOption;
